<template>
  <div class="pages">
    <div class="head">
      <el-select v-model="queryStatus" size="small" placeholder="请选择">
        <el-option v-for="item in optionList" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
      </el-select>

      <el-input placeholder="请输入内容" v-model="keyword" clearable size="small" prefix-icon="el-icon-search"></el-input>
      <el-button type="primary" @click.stop="queryListData" size="mini">查询</el-button>
      <el-button type="primary" @click=" routerPush('0', '')" size="mini" class="searchBtn" v-if="setRole('新增海报')">新增海报</el-button>
    </div>
    <div class="list-body">
      <template>
        <el-table :data="tableDataList" stripe style="width: 100%">
          <el-table-column prop="picUrl" label="封面">
            <template slot-scope="scope">
              <img :src="scope.row.picUrl" class="head_pic">
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" width="180"></el-table-column>

          <el-table-column prop="validity" label="有效期"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status" active-color="#13ce66" class="demo" active-text="启用" inactive-text="停用" active-value="0" inactive-value="1" :disabled="!isOpen" @click.native="changeStatus(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="editData(scope.row)" v-if="setRole('编辑')">编辑</el-button>
              <el-button type="text" size="small" @click="deletAdvertisement(scope.row)" v-if="setRole('删除')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="pageblock">
        <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,15,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import util from "@/util";
import u from "@/util";

import {
  searchPosSubScreen, // 查询
  changePosSubScreen // 改变状态和删除
} from "@/api";
import { mapState } from "vuex";
export default {
  computed: mapState(["sub", "power", "merchantId"]),
  data() {
    return {
      queryStatus: "",
      keyword: "",
      dis: false,
      optionList: [
        { value: "", label: "全部" },
        {
          value: "0",
          label: "启用",
          selected: true
        },
        {
          value: "1",
          label: "停用"
        }
      ],
      tableDataList: [],
      total: 0,
      pageSize: 20,
      totalItems: 0,
      currentPage: 1,
      isOpen: false
    };
  },
  created() {},
  mounted() {
    this.getListData(
      this.merchantId,
      this.queryStatus,
      this.keyword,
      this.currentPage,
      this.pageSize
    );
    this.isOpen = this.setRole("开启");
  },
  methods: {
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    queryListData() {
      this.getListData(
        this.merchantId,
        this.queryStatus,
        this.keyword,
        this.currentPage,
        this.pageSize
      );
    },
    forCreatTime(row) {
      let year = u.foryear(parseInt(row.createTime));
      let time = u.fortime(parseInt(row.createTime));
      return year + " " + time;
    },

    getListData(companyId, status, title, pageNum, pageSize) {
      let data1 = {
        shopId: companyId,
        status: status,
        title: title,
        pageNum: pageNum,
        pageSize: pageSize
      };
      searchPosSubScreen(data1).then(res => {
        this.tableDataList = res.data.list;
        this.totalItems = res.data.pageTotal;
      });
    },
    changeStatus(row) {
      if (!this.isOpen) {
        return false;
      }

      let message = "确定要启用该内容吗",
        tipmsg = "启用成功";

      if (row.status == 1) {
        message = "确定要关闭该内容吗";
        tipmsg = "关闭成功";
      }
      let changeData = {
        id: row.id,
        dr: "",
        status: row.status
      };
      this.$confirm(message, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          changePosSubScreen(changeData).then(res => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: tipmsg
              });
              this.getListData(
                this.merchantId,
                this.queryStatus,
                this.keyword,
                this.currentPage,
                this.pageSize
              );
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.getListData(
            this.merchantId,
            this.queryStatus,
            this.keyword,
            this.currentPage,
            this.pageSize
          );
        });
    },
    editData(row) {
      this.routerPush("1", row.id);
    },
    deletAdvertisement(row) {
      this.$confirm("您确认要删除该内容么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(() => {
        let deleteData = {
          id: row.id,
          dr: 1,
          status: ""
        };
        changePosSubScreen(deleteData).then(res => {
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "删除成功"
            });
            this.getListData(
              this.merchantId,
              this.queryStatus,
              this.keyword,
              this.currentPage,
              this.pageSize
            );
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
    toPage() {
      this.getListData(
        this.merchantId,
        this.status,
        this.keyword,
        this.currentPage,
        this.pageSize
      );
    },

    routerPush(status, id) {
      util.routerTo("/operate-management/pos-management/pos-subAdd", {
        status: status,
        id: id
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getListData(
        this.merchantId,
        this.status,
        this.keyword,
        this.currentPage,
        this.pageSize
      );
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getListData(
        this.merchantId,
        this.status,
        this.keyword,
        this.currentPage,
        this.pageSize
      );
    }
  }
};
</script>
<style scoped>
.pages {
  padding: 20px;
}
.head {
  margin-bottom: 20px;
}
.searchBtn {
  float: right;
}
.head .el-input {
  width: 200px;
}
img {
  width: 100%;
}
</style>
<style >
.demo .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
/*打开时文字位置设置*/
.demo .el-switch__label--right {
  z-index: 1;
  right: -3px;
}
/*关闭时文字位置设置*/
.demo .el-switch__label--left {
  z-index: 1;
  left: 19px;
}
/*显示文字*/
.demo .el-switch__label.is-active {
  display: block;
}
.demo.el-switch .el-switch__core,
.demo.el-switch .el-switch__label {
  width: 50px !important;
}
</style>



